<template>
	<view style="background-color: #f7f7f7;">
		<view class="title">
			<image src="../../../static/车联网服务-08我的-05我的车辆添加_slices/箭头.png" @click="back"></image>
			<view>添加车辆</view>
		</view>
		<view class="body">
			<image src="../../../static/车联网服务-08我的-06我的车辆-01添加车辆_slices/组 6.png"></image>
			<view>
				<view class="v1">
					<text>车辆类型</text>
					<input type="text" placeholder-class="search-input-placeholder" placeholder="请选择" v-model="carType"/>
				</view>
				<view class="v1">
					<text>车辆型号</text>
					<input type="text" placeholder-class="search-input-placeholder" placeholder="请选择" v-model="model"/>
				</view>
				<view class="v1">
					<text>车辆号牌</text>
					<input type="text" placeholder-class="search-input-placeholder" placeholder="请输入您的车牌号" v-model="licensePlate"/>
				</view>
				<view class="v1">
					<text>车主姓名</text>
					<input type="text" placeholder-class="search-input-placeholder" placeholder="请输入您的姓名" v-model="name"/>
				</view>
				<view class="v1">
					<text>电话号码</text>
					<input type="text" placeholder-class="search-input-placeholder" placeholder="请输入您的手机号" v-model="phone"/>
				</view>
				<view class="v1">
					<text style="margin-top: -80rpx;">照片</text>
					<uni-file-picker v-model="carPhoto" fileMediatype="image" mode="grid" :limit="1"  @select="select" :auto-upload="false"
						@progress="progress" @success="success" @fail="fail">
						<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
							<image style="width: 30rpx; height: 30rpx; margin-left: 0rpx;"
								src="../../../static/车联网服务-08我的-06我的车辆-01添加车辆_slices/加号.png"></image>
							<view style="font-size: 20rpx; color: #e3e3e3;">上传车辆照片</view>
						</view>
					</uni-file-picker>

				</view>
			</view>
		</view>

		<view class="bottom" @click="addCar"> 
			<button>
				<image src="../../../static/车联网服务-08我的-05我的车辆添加_slices/加号.png"></image>添加车辆
			</button>
		</view>
	</view>

</template>

<script>
	import request from 'utils/api.js'
	import upload from '../../../utils/fileupload'
	export default {
		data() {
			return {
				imageValue: [],
				id:null,
				name:"",
				phone:"",
				filePath: null
			}
		},
		methods: {
			select(e) {
				upload(e.tempFilePaths[0]).then((res)=>{
				 console.log(res);
				 this.filePath = res;
				 console.log("file Path",this.filePath);
				 })
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			//返回上一页
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			//添加
			addCar(){
				 if (!this.carType || !this.licensePlate === 0) {
				        uni.showToast({
				            title: '请填写完整信息',
				            icon: 'none',
				        });
				        return;
				    }
				const formData = {
					userId: this.id, // 假设用户 ID 从 onLoad 参数中获取
					carType: this.carType,
					licensePlate: this.licensePlate,
					model: this.model,
					carPhoto: this.filePath, // 添加图片 URL
				};
				
				request({
					url: "/car/insertCar",
					data: formData
				}).then(response => {
					console.log("返回",response);
					if (response === 1) {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
						uni.navigateTo({
							url:"/pacakgeMy/pages/addSuccess/addSuccess"
						});
					} else {
						uni.showToast({
							title: '添加失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					console.error("添加失败：", error);
						uni.showToast({
							title: '网络错误，请稍后再试',
							icon: 'none'
						});
					});
			},
			
				
		},
		onLoad(option){
			this.id=option.id;
			this.name=option.name;
			this.phone=option.tel;
		}
	}
</script>

<style lang="scss">
	.title {
		background-image: url('../../../static/车联网服务-00首页_slices/图层 1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 350rpx;
		display: flex;
		padding: 60rpx 300rpx 40rpx 30rpx;
		justify-content: space-between;

		image {
			color: white;
			width: 35rpx;
			height: 35rpx;
		}

		view {
			color: white;
		}
	}

	.body {
		width: 82%;
		margin: -300rpx auto;
		border-radius: 20rpx;
		padding: 40rpx;
		background-color: #ffffff;

		image {
			margin-bottom: 25rpx;
		}

		.v1 {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			text {
				background-color: #3789ff;
				color: white;
				width: 140rpx;
				height: 58rpx;
				font-size: 24rpx;
				line-height: 58rpx;
				text-align: center;
				border-radius: 40rpx;
				margin-right: 10rpx;
			}

			.search-input-placeholder {
				color: #e3e3e3;
			}

			input {
				border: 1rpx solid #e3e3e3;
				border-radius: 35rpx;
				font-size: 27rpx;
				height: 58rpx;
				width: 80%;
				padding-left: 30rpx;
			}

			// view {
			// 	// margin-top: 50rpx;
			// 	border-radius: 15rpx;
			// 	width: 150rpx;
			// 	height: 150rpx;
			// 	border: 1rpx solid #e3e3e3;
			// 	display: flex;
			// 	flex-direction: column;
			// 	align-items: center;
			// 	justify-content: center;

			// 	image {
			// 		width: 40rpx;
			// 		height: 44rpx;
			// 		margin-right: 140rpx;
			// 		margin-top: 30rpx;
			// 		margin-bottom: -60rpx;
			// 	}

			// 	view {
			// 		font-size: 20rpx;
			// 		color: #e3e3e3;
			// 		border: none;
			// 		margin-top: 30rpx;
			// 	}
			// }

		}

		image {
			width: 340rpx;
			height: 230rpx;
			margin-left: 140rpx;
		}
	}

	.bottom {
		// margin-top: 335rpx;
		position: absolute;
		width: 90%;
		top: 1190rpx;
		height: 90rpx;
		background-color: white;
		padding: 40rpx 50rpx 10rpx 50rpx;

		button {
			height: 68rpx !important;
			border-radius: 35rpx;
			background-color: #3789ff;
			color: white;
			line-height: 68rpx;
			font-size: 25rpx;

			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>